<template>
<div>
    <listItemCom :musicList="list" :totalNums="totalRow" :noDate="lastPage" @addDataBtn="handelAddDataBtn" @removeItem="deleItemBtn" :type="7"></listItemCom>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import listItemCom from "../PersonalMusic/listItemCom";
export default {
    name: "MyCollection",
    components: {
        listItemCom,
    },
    data() {
        return {
            list: [],
            lastPage: false,
            pageNumber: 1,
            totalRow: null,
        };
    },
    mounted() {
        this.getCollectListData();
    },
    methods: {
        // 获取收藏列表数据
        getCollectListData() {
            let that = this;
            controller
                .myCollectList({
                    page: that.pageNumber,
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("获取收藏列表数据", res);
                    res.baseData.list.forEach(item => {
                        // 用于子组件
                        item.commonId = item.collectId
                    })
                    this.list = that.list.concat(res.baseData.list);
                    this.lastPage = res.baseData.lastPage;
                    this.pageNumber = res.baseData.pageNumber;
                    this.totalRow = res.baseData.totalRow;
                });
        },
        // 接收子组件传来的页面参数
        handelAddDataBtn(nums) {
            console.log("handelAddDataBtn", nums);
            this.pageNumber++;
            this.getCollectListData();
        },
        // 取消收藏
        deleItemBtn(ids) {
            let that = this;
            console.log("取消收藏", ids);
            controller
                .delCollect({
                    ids,
                })
                .then((res) => {
                    console.log(res);
                    that.pageNumber = 1;
                    that.list = [];
                    that.getCollectListData();
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang='' scoped>
</style>
